<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="styleintro.css">
  <link rel="stylesheet" href="./css/swiper.min.css">
</head>

<body>
  <header class="header">
    <a href="#" class="logo">小小旅馆.</a>

    <div class="social-media">
      <a href=""><img src="../res/boxicons-2.1.4-SVG-24/svg/bxl-facebook-square.svg" alt=""></a>
      <a href=""><img src="../res/boxicons-2.1.4-SVG-24/svg/bxl-google.svg" alt=""></a>
      <a href=""><img src="../res/boxicons-2.1.4-SVG-24/svg/bxl-telegram.svg" alt=""></a>
      <a href=""><img src="../res/boxicons-2.1.4-SVG-24/svg/bxl-twitter.svg" alt=""></a>
    </div>

    <nav class="navbar">
      <a href="">Destinations</a>
      <a href="">Booking</a>
      <a href="../service/service.html">Services</a>
      <a href="../login/login.html">Log in Here</a>
    </nav>
  </header>
  <div class="apple-retail">
    <div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide init">
          <div class="inner">
            <figure><img src="../res/img/img11.jpg"></figure>
            <div class="gallery-item-desc">
              <h3 class="typography-label">灵感迸发，一课又一课。</h3>
              <p class="typography-body">参加我们的实际操作互动课程，与影响广泛的艺术家、音乐家、开发者和企业家开展交流。</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="inner">
            <figure><img src="../res/img/img12.jpg"></figure>
            <div class="gallery-item-desc">
              <h3 class="typography-label">照片和视频</h3>
              <p class="typography-body">探索如何拍摄出你乐于分享的照片和视频。这里有“光影漫步”、“光影实验室”、“Pro 行家讲座”和“进阶讲座”等各种课程等你参加。</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="inner">
            <figure><img src="../res/img/img13.jpg"></figure>
            <div class="gallery-item-desc">
              <h3 class="typography-label">音乐</h3>
              <p class="typography-body">你可以参加“进阶讲座”和“音乐实验室”等课程，开始创作属于自己的节拍；也可以参加“Pro 行家讲座”课程，让自己的音乐制作能力更进一步。</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="inner">
            <figure><img src="../res/img/img14.jpg"></figure>
            <div class="gallery-item-desc">
              <h3 class="typography-label">编程</h3>
              <p class="typography-body">来编写你的第一行代码，这比你想象的要容易多了。我们有“课外一小时”、“夏令营”、“进阶讲座”等各种课程，来教你学习如何编程。</p>
            </div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="inner">
            <figure><img src="../res/img/img15.jpg"></figure>
            <div class="gallery-item-desc">
              <h3 class="typography-label">艺术和设计</h3>
              <p class="typography-body">参加我们的“现场艺术创作”、“户外写生”、“课外一小时”和“进阶讲座”等课程，开始你的新创作。</p>
            </div>
          </div>
        </div>
      </div>
      <div class="swiper-button-prev"></div>
      <!--左箭头-->
      <div class="swiper-button-next"></div>
      <!--右箭头-->
    </div>
  </div>
  <section class="tours">
    <div class="row">
      <div class="col content-col">
        <h1>小小旅馆</h1>
        <div class="line"></div>
        <p>这里有舒适的单人间，豪华的二人间，安静的三人间，温馨的四人间.....   快来入住吧！</p>
        <a href="../service/service.html" class="btn">Learn More</a>
      </div>
      <div class="col image-col">
        <div class="image-gallery">
          <img src="../res/img/single.jpg" alt="">
          <img src="../res/img/double.jpg" alt="">
          <img src="../res/img/three.jpg" alt="">
          <img src="../res/img/four.jpg" alt="">
          <img src="../res/img/five.jpg" alt="">
          <img src="../res/img/six.jpg" alt="">
        </div>
      </div>
    </div>
  </section>

  <section class="footer">
    <p>Today is 2023-12-13||@Mr.xuii@outlook.com||PhoneNumber:123456789</p>
    <p>Copyright @ 2023 Outdoor ADVENTURE</p>
  </section>

  <script src="./js/swiper.min.js"></script>
  <script src="scriptintro.js"></script>
</body>

</html>